<!-- 递归 家族节点 -->
<template>
	<div class="node-ul-parent">
		<div class="node-li" v-for="(item,index) in dataList" :key="index">
			<div class="node-border"></div>
			<div class="node-Name flex">
				<div class="icon" @click="changeState(item)">
					{{item.childList.length > 0 ? '+' : '-'}}
				</div>
	
				<div class="flex">
					<div v-for="(v,i) in item.value" :key="i" class="c1 flex">
						<img :src="config.serverImg+v.img" @click="pickImg.acData=item;pickImg.show = true;acIndex = i"/>
						<div>
							<div class="c2 flex c6">
								<div>{{v.name}}</div>
								<div>{{year - time(Number(v.start_time),'yyyy')}}周岁 </div>
								<div>生肖：属{{ssArr[(time(Number(v.start_time),'yyyy') - 1900)%12]}}</div>
							</div>
							<div class="flex c2">
								{{v.start_type}}
								<span v-if="v.start_time">{{time(Number(v.start_time),'yyyy/mm/dd')}}</span>
								<span v-else>暂无记录</span>
								
								<div v-if="v.end_time != 0">
									~{{v.end_type}}{{time(Number(v.end_time),'yyyy/mm/dd')}}
								</div>
							</div>
						</div>
					</div>
				</div>
		
				<div class="c4">
					<div>{{num}}</div>
					<div>代</div>
				</div>
				<div class="c5 flex">
					ID:{{item.id}}
					<span @click="addNode(item)">新增</span>
					<span v-if="item.copy_id" @click="syncData(item)">同步</span>
					
					<el-popover v-model:visible="showCopy" placement="left" :width="160" v-else>
					    <el-input type="text" v-model="copyForm.uid" placeholder="uid"></el-input>
					    <el-input type="text" v-model="copyForm.pid" placeholder="pid"></el-input>
					    <el-input type="text" v-model="copyForm.sort" placeholder="sort"></el-input>
					    <div style="text-align: right; margin: 0">
					      <el-button size="mini" type="text" @click="showCopy = false">取消</el-button>
					      <el-button type="primary" size="mini" @click="copyData(item)">确定</el-button>
					    </div>
					    <template #reference>
						  <span @click="showCopy = true">复制</span>
					    </template>
					</el-popover>
					
					
	
					<span @click.stop="selectNodeEdit(item)">编辑</span>
					
					<!-- <span @click.stop="saveData(item)">保存</span> -->
					<el-popover v-model:visible="delObj.show" placement="left" :width="160">
					    <p>确定删除?</p>
					    <div style="text-align: right; margin: 0">
					      <el-button size="mini" type="text" @click="delObj.show = false">取消</el-button>
					      <el-button type="primary" size="mini" @click="delData(item)">确定</el-button>
					    </div>
					    <template #reference>
						  <span @click="delObj.show = true">删除</span>
					    </template>
					</el-popover>
					
				</div>
			</div>
			<div class="node-ul">
				<tree-node 
					:dataList="item.childList" 
					v-if="item.childList.length > 0 && item.isShow" 
					:num="num+1"
					@loadData="loadData"
					@selectNodeEdit="selectNodeEdit">
				</tree-node>
			</div>
		</div>
	</div>
</template>

<script setup>
	import treeNode from "@/components/tree-node.vue"
	import config from "@/common/config.js";

	import time from "@/utils/timeFormat.js";

	import publicJS from "@/hook/public.js";
	const {ElMessage,api} = publicJS();

	const emit = defineEmits(["select"])
	const props = defineProps({
		dataList: {
			type:Array,
			default:[]
		},
		num: {
			type:Number,
			default:1
		},
	})
	console.log(props);
	const ssArr = ['鼠','牛','虎','兔','龙','蛇','马','羊','猴','鸡','狗','猪',];
	
	const year = new Date().getFullYear()
	
	const changeState = (e)=>{
		console.log(e);
		e.isShow = !e.isShow 
	}
	
	const saveData = (v)=>{
		delete v.childList;
		api.post('api/family/edit_data',v).then(r=>{
			ElMessage.success('保存成功')
		})
	}
	
	const pickImg = reactive({
		show:false,
		name:'123',
		acData:null
	});
	
	//选择图片
	const selectImg = (name)=>{
		pickImg.show = true;
		pickImg.name = name
	}
	
	//确定图片
	const acIndex = ref(0)
	const imgSuccess = (res)=>{
		pickImg.show = false;
		console.log(pickImg.acData.value);
		if(res)pickImg.acData.value[acIndex.value].img = res.value
	}
	
	const delObj = reactive({
		show:false
	})
	const delData = (v)=>{
		// showDel.value = false;
		api.post('api/family/del_data',{
			id:v.id
		}).then(r=>{
			ElMessage.success({
				message:'删除成功',
			})
			emit('loadData',v)
		})
	}
	
	//同步内容
	const copyForm = reactive({
		pid:'',
		sort:'1',
		uid:''
	})
	const copyData = (v)=>{
		api.post('a/family/copy_data',{
			...copyForm,
			value:v.value,
			copy_id:v.id
		}).then(r=>{
			ElMessage.success({
				message:'复制成功'
			})
		})
	}
	
	//新增节点
	const addNode = (v)=>{
		console.log(v);
		api.post('api/family/add_one_node',{
			member_id:2,
			...v
		}).then(r=>{
			ElMessage.success({
				message:'新增成功'
			})
			emit('loadData',v)
		})
	}
	
	//同步内容
	const syncData = (v)=>{
		api.post('a/family/sync_data',v).then(r=>{
			ElMessage.success({
				message:'同步成功',
				onClose:()=>{
					location.reload()
				}
			})
		})
	}
	
	//递归 向上返回事件
	const loadData = (v)=>{
		emit('loadData',v)
	}
	const selectNodeEdit = (v)=>{
		emit('selectNodeEdit',v)
	}
	//递归 向上返回事件
</script>

<style lang="scss" scoped>
	.c1{margin:0 15px;}
	.c1 img{width: 40px;height: 40px;border-radius: 100%;display: block;margin-right: 5px;}
	.c2{font-size: 13px;color: #666;line-height: 20px;}
	.c2 .el-input{width: 100px;}
	.c2 span{display: inline-block;margin-left: 5px;}
	.c3{font-size: 12px;color: #888;line-height: 15px;margin-top: 3px;}
	.c4{position: absolute;background: #fff;right:-7px;top:50%;transform: translateY(-50%);width: 15px;text-align: center;font-size: 14px;color: #666;line-height: 15px;}
	.c5{position: absolute;right:-200px;font-size: 14px;color: #555;}
	.c5 span{display: inline-block;margin-left: 10px;}
	.c5 span:hover{color: var(--el-color-primary);cursor: pointer;}
	.c6 > div{margin-right: 8px;color: #555;}
	.node-ul-parent {
		margin: 0;
		padding: 0 0 0 20px;
	}
	.node-ul{
		margin: 0;
		padding: 0 0 0 30px;
	}

	.node-ul .node-li ,.node-ul-parent .node-li {
		list-style: none;
		position: relative;
	}

	.node-ul .node-li:before {
		position: absolute;
		content: '';
		top: 25px;
		left: -30px;
		width: 30px;
		height: 1px;
		border-bottom: 1px solid #666;
	}

	.node-ul .node-li:not(:last-child)::after{
		position: absolute;
		content: '';
		top: -9px;
		left: -30px;
		bottom: -36px;
		border-left: 1px solid #666;
	}
	.node-ul .node-li:first-child .node-border{
		position: relative;
	}
	.node-ul .node-li:first-child .node-border::after {
		position: absolute;
		content: '';
		height: 36px;
		top: -9px;
		left: -30px;
		bottom: 0px;
		border-left: 1px solid #666;
	}
	
	.node-Name{
		background: #fff;position: relative;width: 570px;
		padding:10px 30px 10px 10px;
		line-height: 20px;
		padding-left: 7px;
		border: 1px solid #ccc;
		margin: 10px 0;
		border-radius: 7px;
		.icon{
			padding: 0 3px 0 0;font-size: 24px;cursor: pointer;
		}
	}
</style>
